import React, {Component} from "react"
import {View, Image, StyleSheet, ViewStyle} from "react-native";
import {connect} from "react-redux";

interface IProps{
    src:string | any
    position?:"top" | "bottom" | "right" | "left"
    text?:any
    textHeight?:any
    style?:ViewStyle
}
class ImageBox extends Component<IProps>{
    static defaultProps:any = {
        position:"bottom"
    };
    constructor(props: IProps | Readonly<IProps>){
        super(props);

    }

    render():any{
        let {src,position,text,textHeight,style} = this.props;
        let bar = position === "top"?{width:"100%",top:0}:position === "bottom"?{width:"100%",bottom:0}:position === "left"?{left:0,height:"100%"}:{right:0,height:"100%"};
        return (
            <View style={[style]}>
                <Image source={src} style={styles.images} />
                <View style={[styles.imgbar,bar,textHeight]}>{text}</View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    imgbar:{
        width:"100%",
        backgroundColor:"rgba(255,255,255,0.6)",
        position:"absolute",
        zIndex:10
    },
    images:{
        width:"100%",
        height:"100%",
        resizeMode: 'stretch',
    }
});
const mapStateToProps = (state:any) => ({

});
const mapDispatchToProps = (dispatch:any) => ({

});
export default connect(mapStateToProps,mapDispatchToProps)(ImageBox)
